<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body{
      background:rgb(87, 87, 87);
      text-align: center;
    }
    #c1{
      background:white;
      border:2px solid white;
    }
    h1{
      color:orange;
    }
    .btn-group{
      margin:20px 0;

    }
    .btn{
      border:none;
      padding:.5em 2em;
      font-size: 1.5em;
      margin:0 5px;
      border-radius: .25em;
      box-shadow: 1px 1px 3px rgba(0,0,0,.5);
      cursor:pointer;
      border:2px solid white;
      transition: all .3s ease;
      outline:none;
    }
    .btn:hover{
      transform: scale(1.1);
    }
    .btn-1{
      background:linear-gradient(to top,rgb(128, 133, 30),rgb(242, 255, 0));
      border:2px solid white;
    }
    .btn-2{
      background:linear-gradient(to top,rgb(133, 30, 30),rgb(255, 0, 0));
      border:2px solid white;
      color:white;
    }
    .btn-3{
      background:linear-gradient(to top,rgb(30, 133, 120),rgb(0, 255, 194));
      color:white;
    }
    .btn-4{
      background:linear-gradient(to top,rgb(35, 30, 133),rgb(36, 0, 255));
      color:white;
    }
    .btn-download{
      background:linear-gradient(to top,rgb(30, 133, 126),rgb(0, 240, 255));
      color:white;
    }
  </style>
  <script>
    window.onload=function(){
      let oC=document.getElementById('c1');
      let gd=oC.getContext('2d');
      let oBtn1=document.getElementById('btn1');
      let oBtn2=document.getElementById('btn2');
      let oBtn3=document.getElementById('btn3');
      let oBtn4=document.getElementById('btn4');
      let oBtn5=document.getElementById('btn5');

      let W=oC.width;
      let H=oC.height;

      let oImg=new Image();
      oImg.src='1.png';
      oImg.onload=function(){
        gd.drawImage(oImg, 0, 0);

        let imgData=gd.getImageData(0,0,W,H);
        let data=imgData.data;
        let old_data=[];

        // 保存图片rgba信息
        data.forEach((item,index)=>{
          old_data[index]=item;
        });


        // 变色函数
        function imgFilter(r,g,b,type=1){
          old_data.forEach((item,index)=>{
            data[index]=item;
          });
          // 让蓝变成0
          for(let i=0;i<H;i++){
            for(let j=0;j<W;j++){
              // (i*W+j)*4+?
              if(type==1){
                data[(i*W+j)*4+0]=r||data[(i*W+j)*4+0];  //r
                data[(i*W+j)*4+1]=g||data[(i*W+j)*4+1];  //g
                data[(i*W+j)*4+2]=b||data[(i*W+j)*4+2];  //b
              }else if(type==2){
                data[(i*W+j)*4+0]=data[(i*W+j)*4+1]=data[(i*W+j)*4+2]=(data[(i*W+j)*4+0]+data[(i*W+j)*4+1]+data[(i*W+j)*4+2])/3
              }else if(type==3){

              }
            }
          }
          // 绘图
          gd.clearRect(0,0,W,H);
          gd.putImageData(imgData,0,0);
        }

        // 变黄按钮

        oBtn1.onclick=function(){
          imgFilter(false,false,'0');
        };

        // 变红按钮
        oBtn2.onclick=function(){
          imgFilter(false,'0','0');
        };

        // 变灰按钮

        oBtn3.onclick=function(){
          imgFilter(0,0,0,2);
        };

        oBtn4.onclick=function(){
          imgFilter(0,0,0,3);
        };


        let oForm=document.getElementById('form1');
        let oV=document.getElementsByName('col')[0];
        oBtn5.onclick=function(){
          let col=oC.toDataURL();
          oV.value=col;
          oForm.submit();
        };


      };
    };
  </script>
</head>
<body>
  <h1>Canvas-滤镜</h1>
  <form id="form1" action="http://localhost:8080/download" method="post" style="display:none;">
    <textarea name="col" rows="8" cols="80" id="txt"></textarea>
  </form>
  <canvas id="c1" width="800" height="450"></canvas>
  <div class="btn-group">
    <input type="button" value="变黄" class="btn btn-1" id="btn1">
    <input type="button" value="变红" class="btn btn-2" id="btn2">
    <input type="button" value="变灰" class="btn btn-3" id="btn3">
    <input type="button" value="原图" class="btn btn-4" id="btn4">
    <input type="button" value="下载图片" class="btn btn-download" id="btn5">
  </div>
</body>
</html>
